/*
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-11-14 17:15:35
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2023-11-17 14:42:59
 * @FilePath: /three-react/src/pages/Camera/Camera1.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { useEffect, useRef } from "react"
import createRender from '@/createRender';
import * as THREE from 'three'
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
import { OutlinePass } from "three/examples/jsm/postprocessing/OutlinePass.js";

const state = {}
export default function Page() {
  
  const container = useRef(null);
  useEffect(() => {
    if (!state.isMounted) {
      createRender(container)(render);
      state.isMounted = true;
    }
  }, [])

  function render(scene, camera, renderer) {
    const geometry = new THREE.BoxGeometry(50, 50, 50);
    const material = new THREE.MeshLambertMaterial({
      color: 0x00ffff,
    });

    const mesh = new THREE.Mesh(geometry, material)

    scene.add(mesh)

    const effectComposer = new EffectComposer(renderer);
    const renderPass = new RenderPass(scene, camera)
    effectComposer.addPass(renderPass)
    const { clientWidth, clientHeight } = container.current; 
    const vector2 = new THREE.Vector2(clientWidth, clientHeight);
    const outlinePass = new OutlinePass(vector2, scene, camera);
    outlinePass.selectedObjects = [mesh]
    effectComposer.addPass(outlinePass)
    function animate() {
      effectComposer.render();
      requestAnimationFrame(animate)
    }
    animate();


  }

  return (
    <div id="container" className="full container" ref={container}></div>
  )
}